<template>
  <div class="app-container">
    <row>
      <el-select v-model="queryParams.supplier" placeholder="请选择云服务商">
        <el-option
          v-for="item in suppliers"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      <el-button
        type="primary" plain
        icon="el-icon-upload2"
        size="mini"
        @click="handleImportEcsExcel"
      >上传excel</el-button>
      <el-button
        type="primary" plain
        icon="el-icon-upload2"
        size="mini"
        @click="handleImportEcsZip"
      >上传zip</el-button>
      <el-button
        type="danger"
        icon="el-icon-refresh"
        size="mini"
        @click="handleChargeBtn"
      >清理导入数据</el-button>
      <el-button
        type="danger"
        icon="el-icon-refresh"
        size="mini"
        @click="openReCharge('日报')"
      >计算日报</el-button>
      <el-button
        type="danger"
        icon="el-icon-refresh"
        size="mini"
        @click="openReCharge('月报')"
      >计算月报</el-button>
      <el-button
        type="danger"
        icon="el-icon-refresh"
        size="mini"
        @click="openClearAll()"
      >清除所有统计</el-button>
    </row>
    <el-row :gutter="12" style="margin-top: 10px;">
      <el-col :span="12" style="padding-left: 10px;"><p> {{supplierName}} 已导入：</p></el-col>
    </el-row>
    <el-row :gutter="12" style="margin-top: 10px;">
      <el-col :span="4">
        <el-card shadow="hover" style="cursor: pointer;">
          <i class="el-icon-cpu" style="color: #909399; font-size: 8px;"> CPU（核）</i>
          <div style="font-weight: bold; font-size: 20px; margin-top: 5px;">{{dashboard.cpuCount}}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover" style="cursor: pointer;">
          <i class="el-icon-files" style="color: #909399; font-size: 8px;"> 内存（GB）</i>
          <div style="font-weight: bold; font-size: 20px; margin-top: 5px;">{{dashboard.memoryCount}}</div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover" style="cursor: pointer;">
          <i class="el-icon-box" style="color: #909399; font-size: 8px;"> 存储（GB）</i>
          <div style="font-weight: bold; font-size: 20px; margin-top: 5px;">{{dashboard.diskCount}}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-table :data="tableData" style="width: 100%; margin-top: 10px;" v-loading="loading">
      <el-table-column prop="supplierCode" label="云服务商"></el-table-column>
      <el-table-column prop="timeTag" label="日期">
        <template slot-scope="scope">
          {{parseTime(scope.row.timeTag, '{y}/{m}/{d}')}}
        </template>
      </el-table-column>
      <el-table-column prop="ecsCount" label="云服务器数"></el-table-column>
      <el-table-column prop="cpuCount" label="cpu(核)">
        <template slot-scope="scope">
          <span v-if="scope.row.cpuCount>0" style="color: #F56C6C"><i class="el-icon-caret-top"></i>{{scope.row.cpuCount}}</span>
          <span v-if="scope.row.cpuCount==0" style="color: #909399">{{scope.row.cpuCount}}</span>
          <span v-if="scope.row.cpuCount<0" style="color: #67C23A"><i class="el-icon-caret-bottom"></i>{{scope.row.cpuCount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="memoryCount" label="内存(GB)">
        <template slot-scope="scope">
          <span v-if="scope.row.memoryCount>0" style="color: #F56C6C"><i class="el-icon-caret-top"></i>{{scope.row.memoryCount}}</span>
          <span v-if="scope.row.memoryCount==0" style="color: #909399">{{scope.row.memoryCount}}</span>
          <span v-if="scope.row.memoryCount<0" style="color: #67C23A"><i class="el-icon-caret-bottom"></i>{{scope.row.memoryCount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="diskCount" label="分布式存储(GB)">
        <template slot-scope="scope">
          <span v-if="scope.row.diskFbsCount>0" style="color: #F56C6C"><i class="el-icon-caret-top"></i>{{scope.row.diskFbsCount}}</span>
          <span v-if="scope.row.diskFbsCount==0" style="color: #909399">{{scope.row.diskFbsCount}}</span>
          <span v-if="scope.row.diskFbsCount<0" style="color: #67C23A"><i class="el-icon-caret-bottom"></i>{{scope.row.diskFbsCount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="diskCount" label="集中式存储(GB)">
        <template slot-scope="scope">
          <span v-if="scope.row.diskFcCount>0" style="color: #F56C6C"><i class="el-icon-caret-top"></i>{{scope.row.diskFcCount}}</span>
          <span v-if="scope.row.diskFcCount==0" style="color: #909399">{{scope.row.diskFcCount}}</span>
          <span v-if="scope.row.diskFcCount<0" style="color: #67C23A"><i class="el-icon-caret-bottom"></i>{{scope.row.diskFcCount}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="diskCount" label="集中式高性能(GB)">
        <template slot-scope="scope">
          <span v-if="scope.row.diskFcssdCount>0" style="color: #F56C6C"><i class="el-icon-caret-top"></i>{{scope.row.diskFcssdCount}}</span>
          <span v-if="scope.row.diskFcssdCount==0" style="color: #909399">{{scope.row.diskFcssdCount}}</span>
          <span v-if="scope.row.diskFcssdCount<0" style="color: #67C23A"><i class="el-icon-caret-bottom"></i>{{scope.row.diskFcssdCount}}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 清理数据 -->
    <el-dialog :title="charge.title" :visible.sync="charge.open" width="500px" append-to-body>
      <el-form ref="charge_form" label-width="80px">
        <el-form-item label="云服务商">
          <el-select v-model="charge.selectedSupplier" placeholder="请选择">
            <el-option
              v-for="item in suppliers"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="charge.selectedDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="charge.open = false">关 闭</el-button>
        <el-button type="primary" @click="submitFormCharge">确定清除</el-button>
      </div>
    </el-dialog>

    <!-- 重新算费 -->
    <el-dialog :title="reCharge.title" :visible.sync="reCharge.open" width="400px" append-to-body>
      <el-form ref="charge_form" label-width="80px">
        <!--<el-form-item label="云服务商" v-if="reCharge.day">
          <el-select v-model="reCharge.selectedSupplier" placeholder="请选择">
            <el-option
              v-for="item in suppliers"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="选择月份">
          <el-date-picker
            v-model="reCharge.selectedDate"
            type="month">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reCharge.open = false">关 闭</el-button>
        <el-button type="primary" @click="submitFormRecharge">算 费</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        :accept="upload.accept"
        :headers="upload.headers"
        :action="upload.url"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <span class="el-upload__tip" style="color:red" slot="tip">
          <br>{{upload.info}}          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
          </span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">取 消</el-button>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { parseTime } from '@/utils/ruoyi'
  import { getToken } from '@/utils/auth'
  import { queryDatas, removeData, queryResourcesTotal, recharge, removeAllCharge, rechargeMonth,importHostTemplate } from '@/api/basic/importHost'

  export default {
    name: "importHost",
    components: {},
    data() {
      return {
        upload: {
          accept: ".xlsx, .xls",
          open: false,
          title: "",
          isUploading: false,
          headers: { Authorization: "Bearer " + getToken() },
          url: '',
          info: "",//提示内容
        },
        charge: {
          open: false,
          title: "清理导入数据",
          isUploading: false,
          months: [],
          selectedDate: ['2021-01-01', '2021-01-01'],
          selectedSupplier: 'Sugon'
        },
        reCharge: {
          open: false,
          title: "计算日报",
          isUploading: false,
          months: [],
          selectedDate: '2021-01-01',
          selectedSupplier: 'Sugon',
          day: true
        },
        suppliers: [
          {value: 'Sugon', label: '曙光云'},
          {value: 'Inspur', label: '浪潮云'},
          {value: 'H3C', label: '新华三云'},
        ],
        loading: false,
        total: 0,
        tableData: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          supplier: 'Sugon'
        },
        supplierName: 'Sugon',
        dashboard: {
          cpuCount: 0,
          memoryCount: 0,
          diskCount: 0
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 下载模板操作 */
      importTemplate() {
        importHostTemplate().then(response => {
          this.download(response.msg);
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      getList(){
        this.supplierName = this.queryParams.supplier;
        queryResourcesTotal(this.supplierName).then(res => {
          this.dashboard = res.data || {
            cpuCount: 0,
            memoryCount: 0,
            diskCount: 0
          };
        });
        queryDatas(this.queryParams).then(res => {
          if(res.success){
            this.tableData = res.rows;
            this.total = res.total;
          }
        })
      },
      openClearAll(){
        this.$confirm('删除后不可恢复，是否确定？', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return removeAllCharge();
        }).then(() => {
          this.charge.open = false;
          this.msgSuccess("已清除所有统计");
          this.getList();
        });
      },
      openReCharge(pattern){
        if('日报'==pattern){
          this.reCharge.title = "计算日报";
          this.reCharge.selectedDate = '2021-01-01';
          this.reCharge.selectedSupplier = 'Sugon';
          this.reCharge.open = true;
          this.reCharge.day = true;
        }else if('月报'==pattern){
          this.reCharge.title = "计算月报";
          this.reCharge.selectedDate = '2021-01-01';
          this.reCharge.selectedSupplier = 'Sugon';
          this.reCharge.open = true;
          this.reCharge.day = false;
        }
      },
      handleChargeBtn(){//打开清理数据对话框
        this.charge.open = true;
      },
      submitFormCharge(){
        let selectedDate = this.charge.selectedDate;
        let selectedSupplier = this.charge.selectedSupplier;
        this.$confirm('是否清理'+selectedDate+'的数据?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return removeData({supplierCode: selectedSupplier, timeTag: parseTime(selectedDate[0]), timeTagTo: parseTime(selectedDate[1])});
        }).then(() => {
          this.charge.open = false;
          this.msgSuccess("清理成功");
          this.getList();
        });
      },
      submitFormRecharge(){
        let selectedDate = this.reCharge.selectedDate;
        let selectedSupplier = this.reCharge.selectedSupplier;
        if(this.reCharge.day){
          this.$confirm('是否重新算费，将会计算该月及之后的所有月份?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return recharge({supplierCode: selectedSupplier, timeTag: parseTime(selectedDate)});
          }).then((res) => {
            this.reCharge.open = false;
            this.msgSuccess(res.msg);
          });
        }else{
          this.$confirm('请确定日报已经统计，是否重新统计月报?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return rechargeMonth({timeTag: parseTime(selectedDate)});
          }).then((res) => {
            this.reCharge.open = false;
            this.msgSuccess(res.msg);
          });
        }
      },
      /** 导入按钮操作 */
      handleImportEcsExcel() {
        this.upload.url = process.env.VUE_APP_BASE_API + "/importHost/excel",
        this.upload.title = "导入历史数据excel";
        this.upload.open = true;
        this.upload.info = "文件名格式：x年x月x日-x年-月-日.xls/.xlsx"
        this.upload.accept = ".xlsx, .xls";
      },
      /** 导入按钮操作 */
      handleImportEcsZip() {
        this.upload.url = process.env.VUE_APP_BASE_API + "/importHost/zip",
        this.upload.title = "导入历史数据zip";
        this.upload.open = true;
        this.upload.info = ""
        this.upload.accept = ".zip";
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;

        this.$refs.upload.clearFiles();

        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      },
    },
  };
</script>
<style scoped lang="less">
</style>
